<template>
  <view style="width: 252rpx; height: 100%">
    <!-- <view class="input" @click="selected" :input="input"
      ><image
        :src="input.img"
        mode="scaleToFill"
        style="width: 40rpx; height: 40rpx; margin-right: 10rpx"
      /><text>{{ input.text }}</text>
    </view> -->
    <view class="list" v-show="isSelect">
      <view
        class="item"
        @click="() => handleChange('../static/country/EN.png', 'EN')"
      >
        <image class="img" src="../static/country/EN.png" mode="scaleToFill" />
        <text>EN</text>
      </view>
      <view
        class="item"
        @click="
          () => handleChange('../static/country/SouthKorea.png', '한국어')
        "
      >
        <image
          class="img"
          src="../static/country/SouthKorea.png"
          mode="scaleToFill"
        />
        <text>한국어</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange('../static/country/flag-circle-Germany.png', 'Deutsch')
        "
      >
        <image
          class="img"
          src="../static/country/flag-circle-Germany.png"
          mode="scaleToFill"
        />
        <text>Deutsch</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../static/country/gildata-color-italy.png',
              'Italiano'
            )
        "
      >
        <image
          class="img"
          src="../static/country/gildata-color-italy.png"
          mode="scaleToFill"
        />
        <text>Italiano</text>
      </view>
      <view
        class="item"
        @click="() => handleChange('../static/country/Рос.png', 'Россия')"
      >
        <image class="img" src="../static/country/Рос.png" mode="scaleToFill" />
        <text>Россия</text>
      </view>
      <view
        class="item"
        @click="
          () => handleChange('../static/country/flag_TR_circle.png', 'T ürkiye')
        "
      >
        <image
          class="img"
          src="../static/country/flag_TR_circle.png"
          mode="scaleToFill"
        />
        <text>T ürkiye</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 组件已弃用，直接写在页面了
import { defineExpose, ref } from 'vue';
const input = ref(['']);

//点击下拉框选项
const handleChange = (img, text) => {
  emit('abc', '123456');
  console.log('----->222');
  input.value = { img, text };
  isSelect.value = false;
};
const isSelect = ref(false); //下拉框显示隐藏
const selected = () => {
  isSelect.value = !isSelect.value;
};
//导出,暴露对象
defineExpose({
  selected,
  input,
  isSelect,
  handleChange,
});
</script>
<style scoped lang="scss">
.input {
  width: 252rpx;
  height: 70rpx;
  border: 1px solid #000000;
  background: #000;
  text {
    margin-left: 30rpx;
    font-size: 22rpx;
    font-family: Arial, Arial;
    font-weight: 400;
    color: #ffffff;
    line-height: 26rpx;
  }
}
.list {
  width: 252rpx;
  height: 452rpx;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url('../static/country/Rectangle 33.png');
  background-size: cover;
  background-repeat: no-repeat;
  .item {
    margin-left: 30rpx;
    font-size: 22rpx;
    font-family: Arial, Arial;
    font-weight: 400;
    color: #ffffff;
    line-height: 26rpx;
    .img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
